<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>报餐分析管理</title>
	<link rel="stylesheet" href="/css/common2.css">
	<link rel="stylesheet" href="/css/popup.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		
		.filter-container {
			display: inline-block;
			flex-wrap: wrap;
			/* 允许换行 */
			gap: 10px;
			/* 输入框之间的间距 */
			max-width: 800px;
			
		}

		.import_model {
			margin-top: -35px;
			margin-left: 130px;
		}

		.table {
			width: 100%;
			margin-left: 0;
		}

		.five {
			max-height: 55px !important;
			min-width: 130px !important;
			padding: 0;
		}

		.three {
			min-width: 100px;
			width: 9%;
		}

		.phone {
			color: blue;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}

		.nickname {
			position: absolute;
			left: 40px;
			bottom: calc((100% - 35px) / 2);
			width: 80px;
			text-align: left;
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.untying {
			position: absolute;
			right: 0;
			bottom: 0;
			display: inline-block;
			font-size: 12px;
			cursor: pointer;
			color: #9F9F9F;
		}

		.img-box {
			width: 35px;
			height: 35px;
			display: inline-block;
			padding: 0;
		}

		.phone {
			display: inline-block;
		}

		.header {
			width: 35px;
			height: 35px;
			position: absolute;
			left: 3px;
			bottom: calc((100% - 35px) / 2);
			display: inline-block;
			border-radius: 50%;
		}

		.choose-class {
			width: 94%;
			height: 35px;
			margin-left: 3%;
			margin-top: 35px;
		}

		.uihf {
			display: flex;

		}
		.other {
			height: 33px;
			border: 1px solid #7a7a7a;
		}
		

		.search {
			position: relative;
			right: 0px;
			margin: 5px 10px 0 0;
		}
		.meal-summary {
			bottom: 30px;
			font-size: 18px;
			font-weight: bold;
			text-align: left;
			background-color: rgba(255, 255, 255, 0.8);
			position: fixed;
			left: 15px;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 10px;
			padding: 16px;
			box-shadow:
				0 4px 6px rgba(0, 0, 0, 0.1),
				0 1px 3px rgba(0, 0, 0, 0.08);
			border: 1px solid rgba(0, 0, 0, 0.05);
			backdrop-filter: blur(8px);
			font-family: 'Segoe UI', system-ui;
			min-width: 240px;
			z-index: 1000;
		}

		/* 新增内部布局容器 */
		.meal-summary>div {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
		}

		.meal-summary p {
			margin: 0;
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			padding: 6px 0;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		}

		.meal-summary p:last-child {
			border-bottom: none;
		}

		.meal-summary span {
			color: #1890ff;
			/* 改为科技蓝色系 */
			font-weight: 600;
			font-size: 20px;
			position: relative;
			padding-left: 24px;
		}

		.today-column {
			background-color: #ffeb3b !important;
			color: #000 !important;
			font-weight: bold;
			border: 2px solid red;
		}
	
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;">
		<div class="filter-container">
			<div class="refresh" onclick="location.reload()">刷新</div>
			<div class="uihf">
				
				<!-- <select class="search" v-model="search.type">
					<option :value="undefined">请选择餐食类型</option>
					<option value="1">午餐</option>
					<option value="2">晚餐</option>
					
				</select>
				 -->
				<input placeholder="开始时间" class="search" id="startTime" v-model="search.startTime" style="font-size: 15px; width: 130px;"/>
				<input placeholder="结束时间" class="search" id="endTime" v-model="search.endTime" style="font-size: 15px;width: 130px;"/>
				
				<img src="../image/search.png"  height="35px" width="35" class="search_img" @click="getData2" />
			</div>
		</div>
		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>
		<div class="table " style="margin-left: 2%;width: 96%; overflow: auto;">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th class="one">序号</th>
						<th class="three">校区</th>
		   				<th class="one">餐食类型</th>
						<th class="one">已收费餐数</th>
                        <th class="one">未收费餐数</th>
                        <th class="one">已收费用（元）</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(student,index) in list1">
						<td>
							<input type="checkbox" class="check-box" v-model="student.checked">
						</td>
						<td class="one"><span v-text="index+1"></span></td>
						<td class="one" v-text="student.schoolName"></td>
						
						<td class="one" v-text="student.mealType === 1 ? '午餐' : '晚餐'"></td>
                        <td class="one" v-text="student.toll"></td>
						<td class="one" v-text="student.unchargedPersons"></td>
                    	<td class="one" v-text="calculateToll(student)"></td>
					</tr>
					<tr></tr>
				</tbody>
			</table>
		</div>
		<br>
	</div>
	<div class="meal-summary">
		<div style="display: flex; justify-content: space-between;">
			<!-- 原有统计 -->
			<div>
				<p>已收费晚餐数: <span id="lunch-count">0</span>餐</p>
				<p>未收费晚餐数: <span id="dinner-count">0</span>餐</p>
			</div>


			<div>
				<p>已收费金额: <span id="teacher-lunch-count">0</span>元</p>
				<p>未收费金额: <span id="student-lunch-count">0</span>元</p>

			</div>

		</div>
	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>
	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>
	<script>

		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {
				schools: [],
				urls: {
					del: '/pc/student/del',
                    
				},
				popup: false,
				toClassesId: null,
				boundShow: false,
				shownStudent: null,
                list1:[]
			},
			created: function () {
				var id = top_params().id;
				if (!id) return;
				this.agentId = id
				// this.list1 = '/pc/mealReservation/getMeal1?agentId=' + this.agentId;

                axios.get('/pc/mealReservation/getMeal1?schoolId=' + this.agentId).then(function (res) {
					this.list1 = res.data;
				}.bind(this));
				this.fetchTotalAmount();
				this.getData();

				abled('mealanalysis', this);


			},
			methods:{
				calculateToll(student) {
    return student.mealType === 2 ? student.toll * 25 : student.toll * 20;
  },
                getData2(){
                    axios.get('/pc/mealReservation/getMeal1?schoolId=' + this.agentId,{ params: this.search }).then(function (res) {
					this.list1 = res.data;
				}.bind(this));
				this.fetchTotalAmount()
                },
				fetchTotalAmount() {
					// 调用后台接口，获取汇总金额
					axios.get('/pc/mealReservation/mealAnalysisStatistics?schoolId=' + top_params().id, { params: this.search }).then(function (res) {
						document.getElementById('lunch-count').innerText = res.data.toll;
						document.getElementById('dinner-count').innerText = res.data.unchargedPersons;
						document.getElementById('teacher-lunch-count').innerText = res.data.toll * 25;
						document.getElementById('student-lunch-count').innerText = res.data.unchargedPersons * 25;
					}.bind(this));
				},

				
			},

		}));
		["startTime", "endTime"].forEach(function (it) {
			laydate.render({
				elem: "#" + it,
				type: "date",
				done: function (value, date, endDate) {
					app.search[it] = value;
				},
			});
		});
	</script>

</body>

</html>